<template>
    <div class="nav">
        <div>
            <img src="/static/images/sre5-1.png" alt="">
        </div>
            <div class="sw-warpper1">
                <swiper :options="swiperOption">
                    <swiper-slide v-for="item of swiper" :key="item.id">
                        <img :src="item.img" alt="">
                    </swiper-slide>
                        <div class="swiper-pagination1" slot="pagination"></div>
                </swiper>
            </div>
        </div>
</template>
<script>
// var myVue;
export default {
    name: "swipe",
    data() {
        return {
            swiperOption: {
                pagination: {
                    el: ".swiper-pagination1"
                },
                centeredSlides: true,
                slidesOffsetBefore: 2,
                autoplay: {
                    enabled: true,
                    disableOnInteraction: false,
                    delay: 2000
                },
                on: {},
                speed: 1000,
                loop: true
            },
            swiper: [
                {
                    id: 1,
                    img: "/static/images/sre5-2.png"
                },
                {
                    id: 2,
                    img: "/static/images/sre5-3.png"
                },
                {
                    id: 3,
                    img: "/static/images/sre5-4.png"
                },
                {
                    id: 4,
                    img: "/static/images/sre5-5.png"
                },
                {
                    id: 5,
                    img: "/static/images/sre5-6.png"
                },
                {
                    id: 6,
                    img: "/static/images/sre5-7.png"
                },
                {
                    id: 7,
                    img: "/static/images/sre5-8.png"
                }
            ]
        };
    }
};
</script>
<style scoped>
.swiper-pagination1 >>> .swiper-pagination-bullet-active {
    background: #ff3333;
}
.nav {
    text-align: center;
    margin-top: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background: #ffffff;
}
.nav img {
    width: 65%;
}
.sw-warpper1 img {
    width: 100%;
}
</style>
